<template>
  <div class="manageJob">

    <div>
      <div class="title">
        <h1 style="color: #4D7181;font-size: 40px">管理岗位</h1>
        <div>
          <AppstoreOutlined class="icon"/>
          <AppstoreAddOutlined class="icon"/>
        </div>

      </div>
    </div>
    <div style="border: 2px solid #337ECC; padding: 20px;border-top: 30px solid #337ECC; border-radius: 20px">

      <a-table :columns="columns" :data-source="dataSource" bordered>
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'name'">
            <div class="editable-cell">
              <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
                <a-input v-model:value="editableData[record.key].name" @pressEnter="save(record.key)"/>
                <check-outlined class="editable-cell-icon-check" @click="save(record.key)"/>
              </div>
              <div v-else class="editable-cell-text-wrapper">
                {{ text || ' ' }}
                <edit-outlined class="editable-cell-icon" @click="edit(record.key)"/>
              </div>
            </div>
          </template>
          <template v-else-if="column.dataIndex === 'operation'">

            <router-link :to="{path:'/enterprise/enterpriseManageJob/job/info/'+record.jobId+'/edit'}">
              <a-button type="primary" class="a-button" >编辑</a-button>
            </router-link>

            <router-link :to="{path:'/enterprise/enterpriseManageJob/job/info/'+record.jobId+'/query'}">
              <a-button  class="a-button" style="color: white;background-color: #67C23A">查看</a-button>
            </router-link>


            <a-popconfirm
                title="你确定删除吗?"
                @confirm="onDelete(record.jobId)"
            >
              <a-button  type="primary" danger class="a-button">删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </div>
  </div>

</template>
<script setup>
import {computed, onMounted, reactive, ref, toRaw} from 'vue';
import {cloneDeep} from 'lodash-es';
import {deleteJobAPI, pageJobAPI} from "@/apis/job.js";
import {message} from "ant-design-vue";
import {useUserStore} from "@/stores/user.js";
import {AppstoreAddOutlined, AppstoreOutlined} from "@ant-design/icons-vue";
import {queryInformationByUserIdAPI} from "@/apis/enterprise.js";

const columns = [
  {
    title: '岗位标题',
    dataIndex: 'jobTitle',
  },
  {
    title: '薪资范围',
    dataIndex: 'jobSalary',
  },
  {
    title: '学历要求',
    dataIndex: 'jobEducationRequirement',
  },
  {
    title: '专业要求',
    dataIndex: 'jobMajorRequirement',
  },
  {
    title: '职位地点',
    dataIndex: 'jobLocation',
  },
  {
    title: '联系方式',
    dataIndex: 'jobContactInfo',
  },
  {
    title: '所属行业',
    dataIndex: 'jobIndustry',
  },
  {
    title: '操作',
    dataIndex: 'operation',
  },
];
const dataSource = ref();
const count = computed(() => dataSource.value.length + 1);
const editableData = reactive({});
const edit = key => {
  editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};
const save = key => {
  Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);
  delete editableData[key];
};
const onDelete = async key => {
  const res = await deleteJobAPI(key);
  if (res.data.flag) {
    success(res.data.message);
    // 设置一个定时器，在1.5秒后刷新页面
    setTimeout(() => {
      window.location.reload();
    }, 1000); // 1500毫秒 = 1.5秒
  } else {
    console.log('error submit!', toRaw(key));
  }
};

//获取数据,获取当前用户的id

const useStore = useUserStore();
const enterpriseUserId = ref(useStore.userInfo.userId);
const data = ref({pageCurrent: 1, pageSize: 20, enterprise_id: ''});
const getData = async (data) => {
  const res1=await queryInformationByUserIdAPI(enterpriseUserId.value);
  data.enterprise_id = res1.data.data.enterpriseId;
  const res = await pageJobAPI(data)
  dataSource.value = res.data.data.data;
}
const success = (msg) => {
  message.success(msg);
};
//生命周期
onMounted(() => {
  getData(data.value);
});
</script>


<style lang="scss" scoped>
.manageJob {
  margin: 5px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  border-radius: 30px; /* 你可以调整这个值来改变圆角的大小 */

  .title {
    display: flex;
    justify-content: space-between;

    .icon {
      font-size: 35px;
      padding: 15px;
      color: white;
      margin-right: 20px;
      background-color: #C09E66;
      border-radius: 50px;
      margin-bottom: 10px;
    }
  }
  .a-button{
    margin-left: 10px;
  }
}


.highlight {
  background-color: rgb(255, 192, 105);
}

.editable-cell {
  position: relative;

  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
</style>
